<template>
    <div>
        <city-header></city-header>
        <city-search :cities='cities'></city-search>
        <city-list :cities ="cities" :hot = "hotCities"></city-list>
        <city-alp :cities="cities"></city-alp>
    </div>
</template>
<script>
import cityJson from '@/assets/mock/city.json'
import cityHeader from './components/cityHeader'
import citySearch from './components/search'
import cityList from './components/list'
import cityAlp from './components/alphabet'
export default {
    name:"city",
    components:{
        cityHeader,
        citySearch,
        cityList,
        cityAlp,
    },
    data() {
        return {
            cities:{},
            hotCities:[]
        }
    },
    methods: {
      getCityInfo(){
          if(cityJson.ret && cityJson.data){
              const data = cityJson.data;
              this.cities = data.cities;
              this.hotCities = data.hotCities;
          }
      }
    },
    mounted () {
        this.getCityInfo();
    }
}
</script>
<style lang="stylus" scoped>
    
</style>